<template>
  <div class="sort">
    <van-tree-select
      height="100%"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="handleclick"
    >
      <template #content>
        <van-image v-for="item in array" :key="item.id" :src="item.title_img" />
        <div class="header">
          <span class="line"></span>
          <span class="text" v-for="(item, index) in array" :key="index">{{
            item.title
          }}</span>
          <span class="line"></span>
        </div>
        <van-grid :column-num="3" :border="false">
          <van-grid-item
            v-for="item in sortdata"
            :key="item.id"
            :icon="item.img"
            :text="item.name"
          />
        </van-grid>
        <van-button type="default" color="#F8F4E5" block :disabled="hasMore">{{
          moreText
        }}</van-button>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import { getSortList, getSortInfo, getSortData } from '../../api/sort'
export default {
  props: ['id'],
  data: () => ({
    sortlist: [],
    active: 0,
    items: [
      {
        text: '手机'
      },
      {
        text: '电视'
      },
      {
        text: '电脑'
      },
      {
        text: '家电'
      },
      {
        text: '路由'
      },
      {
        text: '出行'
      },
      {
        text: '智能'
      },
      {
        text: '灯具'
      },
      {
        text: '家电'
      },
      {
        text: '电脑'
      },
      {
        text: '路由'
      },
      {
        text: '手机'
      },
      {
        text: '出行'
      }
    ],
    sortinfo: [],
    array: [],
    sortdata: [],
    hasMore: true
  }),
  created() {
    this.getSortList()
    this.getSortInfo()
    this.getSortData(1)
  },
  methods: {
    async getSortList() {
      const res = await getSortList()
      this.sortlist = res.data.message
    },
    async getSortInfo() {
      const res = await getSortInfo()
      this.sortinfo = res.data.message
      this.array.push(this.sortinfo[0])
    },
    handleclick(index) {
      this.array = []
      this.active = index
      this.array.push(this.sortinfo[index])
      const id = this.active + 1
      this.getSortData(id)
    },
    async getSortData(id) {
      const res = await getSortData(id)
      this.sortdata = res.data.message
    }
  },
  computed: {
    moreText() {
      return this.hasMore ? '没有更多了' : '查看更多'
    }
  }
}
</script>
<style lang="less" scoped>
.sort {
  .header {
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
  .line {
    display: inline-block;
    width: 20px;
    border-top: 1px solid #cccccc;
    margin: 0 10px;
    vertical-align: 5px;
  }
  .van-grid-item__text {
    font-size: 10px;
  }
  .van-button__text {
    color: #b0a590;
  }
  .van-sidebar-item--select::before {
    left: 108px;
    width: 4px;
    height: 50px;
  }
  .van-tree-select__content {
    padding: 0 20px;
  }
}
</style>
